<template>
  <div class="SiginContent">
    <mt-picker :slots="slots"  @change="onValuesChange"></mt-picker>
    <mt-button class="SiginContentItem" @click="handleSigin" >
      <img src="@/assets/siginContentButton.png" height="20" width="20" slot="icon" >
      签到
    </mt-button>
    <div align="left">
      <div>你的机位号是{{sitement}}</div>
      <mt-button size="normal">当前周数：</mt-button><br>
      <mt-button size="normal">当前课程：</mt-button><br>
      <mt-button size="normal">当前教室：</mt-button>
    </div>
    <!--<mt-button @click="getClassInfo">获取课程表</mt-button>-->
  </div>
</template>

<script>
  import { Button } from 'mint-ui';
  import { Picker } from 'mint-ui';
  import axios from 'axios';

  export default {
    name: 'SiginInContent',
    components: {
      MtPicker: Picker,
      MtButton: Button
    },
    data() {
      return {
        sitement: 0,
        site1: 0,
        site2: 0,
        slots: [
          {
            flex: 1,
            values: ['第一排', '第二排', '第三排', '第四排', '第五排', '第六排'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '=',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['第1号', '第2号', '第3号', '第4号', '第5号', '第6号', '第7号', '第8号', '第9号', '第10号'],
            className: 'slot3',
            textAlign: 'left'
          }
        ]
      };
    },
    methods: {
      handleSigin: function () {
        this.sitement = this.site1 * this.site2;
        console.log(this.sitement);
      },
      onValuesChange(picker, values) {
        // console.log(picker.getValues()[0])//行坐标
        // console.log(picker.getValues()[1])//纵坐标
        switch (picker.getValues()[0]) {
          case '第一排':
            this.site1 = 1;
            break;
          case '第二排':
            this.site1 = 2;
            break;
          case '第三排':
            this.site1 = 3;
            break;
          case '第四排':
            this.site1 = 4;
            break;
          case '第五排':
            this.site1 = 5;
            break;
          case '第六排':
            this.site1 = 6;
            break;
        }
        ;
        switch (picker.getValues()[1]) {
          case '第1号':
            this.site2 = 1;
            break;
          case '第2号':
            this.site2 = 2;
            break;
          case '第3号':
            this.site2 = 3;
            break;
          case '第4号':
            this.site2 = 4;
            break;
          case '第5号':
            this.site2 = 5;
            break;
          case '第6号':
            this.site2 = 6;
            break;
          case '第7号':
            this.site2 = 7;
            break;
          case '第8号':
            this.site2 = 8;
            break;
          case '第9号':
            this.site2 = 9;
            break;
          case '第10号':
            this.site2 = 10;
            break;
        }
      },
    },
  }
</script>

<style scoped>
  .SiginContent{
    margin-top: 2rem;
  }
  .SiginContentItem{
    margin-top: 1rem;
  }

</style>
